/*
 功能说明:
 1. 点击向右(左)的图标, 平滑切换到下(上)一页
 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
 3. 每隔3s自动滑动到下一页
 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
 5. 切换页面时, 下面的圆点也同步更新
 6. 点击圆点图标切换到对应的页

 bug: 快速点击时, 翻页不正常
 */
$(function () {
    var $container = $('#container');
    var $imgList = $('#list');
    var IMG_COUNT = $imgList.find('img').length
    var $prev = $('#prev');
    var $next = $('#next');
    var $pointsDivs = $('#pointsDiv').children('span');
    var PAGE_WIDTH = 600 //一页的宽度
    var TIME = 400 //总位移时间
    var ITEM_TIME = 20  //单元位移时间
    var END_IMG_LEFT = -  ( IMG_COUNT - 1) * PAGE_WIDTH  //计算最后一张图片的位置，方便判断
    var RED_INDEX = 0 //当前红点的下标，默认为0
    var movingStatus = false //翻页状态标识，默认没有翻页，为false

    // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
    $prev.click(function () {
        nextPage(false)
    })
    $next.click(function () {
        nextPage(true)
    })

    /**
     * 点击翻页的功能
     * @param next
     * true  翻到下一页
     * false 翻到上一页
     * 数值   跳到指定的图片
     */
    function nextPage(next) {
        //正在翻页则直接返回
        if (movingStatus){
            return
        }
        //进入翻页
        movingStatus = true
        //需要总的偏移量，总的时间
        //单位偏移量和单位时间
        //下一页为负数，上一页为正数
        if (typeof next === 'boolean'){
            var moveLeft = next ? -PAGE_WIDTH : PAGE_WIDTH
        }else {
            var moveLeft = - (next - RED_INDEX) * PAGE_WIDTH
        }
        var itemLeft =  moveLeft / ( TIME / ITEM_TIME )  //单元偏移量
        //获取当前位置
        var currentLeft = $imgList.position().left;
        // 计算一下目标位置
        var targetLeft = currentLeft + moveLeft

        // 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
        //设置定时器，平滑翻页
        var intervalId = setInterval(function () {
            //移动
            currentLeft += itemLeft
            $imgList.css('left',currentLeft)
            //如果当前位置等于目标位置，清除定时器，不再移动
            if (currentLeft === targetLeft){
                clearInterval(intervalId)
                //如果图片翻到和第二张相同的最后一张，翻页完成之后跳到第二张
                if (currentLeft === END_IMG_LEFT){
                    currentLeft = - PAGE_WIDTH
                    $imgList.css('left',currentLeft)
                }else if (currentLeft === 0){//如果图片到达最左端，改为第5张
                    currentLeft = END_IMG_LEFT + PAGE_WIDTH
                    $imgList.css('left',currentLeft)
                }
                updatePoints(next)
                //更新翻页标识位false
                movingStatus = false
            }
        },ITEM_TIME)
        //移动图片
        // $imgList.css('left',currentLeft+moveLeft)
    }

    // 3. 每隔3s自动滑动到下一页
    var intervalId = setInterval(function () {
        nextPage(true)
    },2000)

    // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
    //事件监听加在内容区域上
    $container.hover(function () {
        //鼠标移入，清除定时器
        clearInterval(intervalId)
    },function () {
        //鼠标移出，开启定时器（这个定时器一定要使用全局的，后面移入的时候才可以清除）
        intervalId = setInterval(function () {
            nextPage(true)
        },2000)
    })

    // 5. 切换页面时, 下面的圆点也同步更新
    /**
     * 翻页时同步下面的小圆点
     * @param next
     * true  为下一页
     * false 为上一页
     * 如果为数值  则是指定的圆点下标
     */
    function updatePoints(next) {
        //下一页下标加一，上一页下标减一
        if (typeof next === 'boolean'){
            var nextPoint = next ? ( RED_INDEX + 1 ) : (RED_INDEX - 1)
        } else {
            var nextPoint = next
        }
        //对于两边的情况做一下处理
        if (nextPoint === $pointsDivs.length){
            nextPoint = 0
        }else if (nextPoint === -1){
            nextPoint = 4
        }
        //清除原本的红点，给下一个红点加上红色
        $($pointsDivs[nextPoint]).addClass('on')
        $($pointsDivs[RED_INDEX]).removeClass('on')
        //更新当前红点的下标
        RED_INDEX = nextPoint
    }

    // 6. 点击圆点图标切换到对应的页
    $pointsDivs.click(function (){
        var targetIndex = $(this).index()
        if (targetIndex != RED_INDEX){
            nextPage(targetIndex)
        }
    })
})
